import { useEffect, useMemo } from 'react';
import { Popover, Form, Input, Button } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import Color from '../../../../../Color';
import '../style.less';

export default function PopoverComponent(props) {
    const { popoverVisible, setPopoverVisible, value, onChange, type } = props;

    return (
        <Popover
            content={<PopoverContent setPopoverVisible={setPopoverVisible} value={value} onChange={onChange} type={type} />}
            trigger='click'
            title='按钮设置'
            visible={popoverVisible}
            placement='bottomRight'
            overlayClassName='process-designer-button-popover'
        >
            <SettingOutlined onClick={() => { setPopoverVisible(true) }} />
        </Popover>
    )
};

const PopoverContent = (props) => {
    const { setPopoverVisible, value, onChange, type } = props;
    const [form] = Form.useForm();

    const buttonItem = useMemo(() => {
        return value?.find((item) => item?.action == type);
    }, [value]);
    const onCancel = () => {
        setPopoverVisible(false);
    };

    const onOk = async () => {
        try {
            const data = await form.validateFields();
            const _value = value?.map((item) => {
                if (item?.action == type) {
                    return {
                        ...item,
                        ...data,
                    }
                } else {
                    return item;
                }
            });
            onChange(_value);
            onCancel();
        } catch (error) {

        };
    };

    useEffect(() => {
        const _buttonItem = value?.find((item: { action: string; }) => item?.action == type);
        form.setFieldsValue({
            type: _buttonItem?.type,
            fontColor: _buttonItem?.fontColor,
            bgColor: _buttonItem?.bgColor,
        })
    }, [value]);

    return (
        <>
            <Form
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 17 }}
                labelAlign='right'
                labelWrap={true}
                layout={'horizontal'}
                form={form}
                initialValues={{
                    type: buttonItem?.type,
                    fontColor: buttonItem?.fontColor,
                    bgColor: buttonItem?.bgColor,
                }}
            >
                <Form.Item label='标识' name={'type'}>
                    <Input />
                </Form.Item>
                <Form.Item label='文字颜色' name={'fontColor'}>
                    <Color />
                </Form.Item>
                <Form.Item label='背景颜色' name={'bgColor'}>
                    <Color />
                </Form.Item>
            </Form>
            <div className='process-designer-button-popover-button'>
                <Button onClick={onCancel}>取消</Button>
                <Button type='primary' onClick={onOk}>确定</Button>
            </div>
        </>
    )
};